<template>
  <div id="root">
    <MyHeader @addTodo="addTodo"></MyHeader>
    <List :todos="todos"></List>
    <MyFooter :todos="todos" @checkAllTodo="checkAllTodo" @clearAllTodo="clearAllTodo"></MyFooter>
	<!-- <Father @getSonName="getSonName"></Father> -->
    <!-- {{todos}} -->
  </div>
</template>

<script>
import pubsub from 'pubsub-js'
import MyHeader from './components/MyHeader.vue'
import MyFooter from './components/MyFooter.vue'
// import Item from './components/Item.vue'//item是list的子组件 这里就不要引用了
import List from './components/List.vue'

export default {
  name: 'App',
  components: {
    MyFooter, List, MyHeader
  },
  data() {
    return {
    //   todos: [
    //     // {id: '001', title: '抽烟', done: true},
    //     // {id: '002', title: '喝酒', done: false},
    //     // {id: '003', title: '打牌', done: true},
    //   ]
	todos: JSON.parse(localStorage.getItem('todos')) || [] //要是前面的bool值为FALSE 就赋值后面的[]
    }
  },
  methods: {
    addTodo(todo) {
      this.todos.unshift(todo)
    },
    checkTodo(id) {
      this.todos.forEach((todo) => {
        if(todo.id === id) todo.done = !todo.done
      })
    },
	deleteTodo(_, id) {
		// _占位接受参数但是不使用  这里会接受到消息名_
		this.todos = this.todos.filter((todo) => {
			return todo.id !== id
		})
	},
	checkAllTodo(done) {
		this.todos.forEach(todo => {
			todo.done = done
		})
	},
	// 更新todo
	updateTodo(id, title) {
		this.todos.forEach((todo) => {
			if(todo.id === id) todo.title = title
		})
	},
	clearAllTodo() {
		if(confirm('确定要删除已完成的项目吗？')) {
			this.todos = this.todos.filter(todo => !todo.done)
		}
	},
	getSonName(params) {
		console.log(params);
	},
	getName() {
		this.$emit('getSonName', this.name)
		this.$emit('getSonName', this.name, 200, 400) //传递多个参数  一般来说要传递多个参数都是放在一个对象上面
	}
  },
  watch: {
	todos: {
		deep: true,//开启深度监视 因为要操作数组对象里面的数据所以要开启深度监视。
		handler(value) {
			localStorage.setItem('todos', JSON.stringify(value))
		}
	}
  },
  mounted() {
	this.$bus.$on('checkTodo', this.checkTodo)//绑定自定义事件
	this.$bus.$on('updateTodo', this.updateTodo)
	// this.$bus.$on('deleteTodo', this.deleteTodo) //利用事件总线实现
	this.pubId = pubsub.subscribe('deleteTodo', this.deleteTodo)


  },
  beforeDestroy() {
	// this.$bus.$off(['checkTodo', 'deleteTodo'])//解绑
	this.$bus.$off('checkTodo')
	this.$bus.$off('updateTodo')
	pubsub.unsubscribe(this.pubId)//取消订阅
  }
}
</script>

<style>
/*base*/
	body {
		background: #fff;
	}
	.btn {
		display: inline-block;
		padding: 4px 12px;
		margin-bottom: 0;
		font-size: 14px;
		line-height: 20px;
		text-align: center;
		vertical-align: middle;
		cursor: pointer;
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
		border-radius: 4px;
	}
	.btn-danger {
		color: #fff;
		background-color: #da4f49;
		border: 1px solid #bd362f;
	}
	.btn-edit {
		color: #fff;
		background-color: skyblue;
		border: 1px solid rgb(83, 193, 236);
		margin-right: 5px;
	}
	.btn-danger:hover {
		color: #fff;
		background-color: #bd362f;
	}
	.btn:focus {
		outline: none;
	}
	.todo-container {
		width: 600px;
		margin: 0 auto;
	}
	.todo-container .todo-wrap {
		padding: 10px;
		border: 1px solid #ddd;
		border-radius: 5px;
	}
</style>
